<template>
	
	<div class="header-wrap">
		<div class="title-wrap">
			<div >
				<el-icon><ArrowLeftBold /></el-icon>
			</div> 
			<span>昆明长水机场</span>
		</div>
		<div class="fun-wrap">
		
			<ul>
				<li>
					<button class="active">场景</button>
				</li>
				<li>
					<button>状态</button>
				</li>
			</ul>
		</div>
		<div class="right-wrap">
			<ul class="ul-wrap">
				<!-- <li><div style="margin-top: -3px;"><span style="font-size: 13px;">锁定/编辑</span> </div></li> -->
				<li>
					<!-- <div class="switch-info">锁定</div> -->
					  <el-switch
					    v-model="scene_Info_switch"
					    class="ml-2"
						    inline-prompt
						    active-text="开启编辑场景"
						    inactive-text="关闭编辑场景"
					    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #5555ff"
					  />
				</li>
				<li><el-icon class="d-li-icon" title="预览"><ChromeFilled /></el-icon> <div class="separator"></div></li>
				<li><el-icon class="d-li-icon" title="设置"><Setting /></el-icon><div class="separator"></div></li>
				<li><el-icon class="d-li-icon" title="帮助"><InfoFilled /></el-icon><div class="separator"></div></li>
				<li @mousedown="MousedownForUserAccount">
					<div class="separator" ></div>
					<el-icon><Avatar /></el-icon>
					<div class="user d-li-icon">超级管理员</div>
					<ul class="dwon" v-show="user_account_down">
						<li class="d-li"><div><el-icon ><Discount /></el-icon></div>账号管理</li>
						<li class="d-li"><div><el-icon ><Right /></el-icon></div>退出</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	
</template>

<script setup lang="ts">
	import {
	  Back,
	  Setting,
	  ChromeFilled,Right,Discount,InfoFilled,
	  Avatar,
	} from '@element-plus/icons-vue'
	import {ArrowLeftBold, ArrowDown } from '@element-plus/icons-vue'

	import { ref } from 'vue'


	const user_account_down = ref(false)
	const scene_Info_switch = ref(false)

	const activeIndex = ref('1')
	const handleSelect = (key: string, keyPath: string[]) => {
	  console.log(key, keyPath)
	}

	const Test=()=>{
		console.log("00")
	}

	const MousedownForUserAccount=(e)=>{
		user_account_down.value=!user_account_down.value
	}	

</script>

<style  scoped>
	.header-wrap{
		height: 45px;
		width: 100%;
	    position: relative; 
		background-color: #28292d;
		border-bottom: 1px solid #18181b;
		display: flex;
		flex-direction:row;
		color: #ccc;
		font-size: 14px;
		
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		>.title-wrap{
			flex: 0.35;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: flex-start;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 100%;
			border-bottom: 1px solid #18181b;
			border-top: 1px solid #515664;
			color: #ccc;
			font-size: 14px;
			position: relative;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: flex-end;
			
			>div{
				margin-left: 10px;
				margin-top: 0.3125rem;
				cursor: pointer;
				margin-right: 5px;
			}
			>span{
				font-size:16px;
			}
		}
		>.fun-wrap{
			flex:  0.4;
			margin-right: 380px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			justify-content: space-around;
			>ul{
				>li{
					list-style: none;
					float: left;
					cursor: pointer;
					padding: 0 4px;
					
					>button{
						display: flex;
						-webkit-box-align: center;
						align-items: center;
						justify-content: space-around;
						font-size: 85%;
						padding: 0px 12px;
						height: 28px;
						margin-right: 5px;
						line-height: 26px;
						border: 1px solid rgb(24, 30, 39);
						border-radius: 1px;
						user-select: none;
						color: rgb(204, 204, 204);
						background-color: rgb(48, 56, 69);
						box-sizing: border-box;
						cursor: pointer;
						white-space: nowrap;
					}
					>.active{
						background-image: linear-gradient(rgba(21, 98, 240, 0.55), rgba(14, 31, 58, 0.55), rgba(14, 31, 58, 0.55));
						border: 1px solid rgb(21, 98, 240);
						margin-right: 10px;
					}
				}
			}
		}
		>.right-wrap{
			flex:  0.35;
			right: 0rem;
			position: absolute;
			top: 10px;
			font-size: 0.875rem;
			font-size: 20px;
			color: #ccc;
			
			
			>.ul-wrap{
				>li{
					list-style: none;
					float: left;
					cursor: pointer;
					padding: 0 4px;
					>span{
						font-size: 14px;
					}
					>.separator{
						height: 20px;
						width: 2px;
						float: inherit;
						margin-right: 10px;
						margin-top: 3px;
						pointer-events: none;
						border-width: 0 1px;
						border-style: solid;
						border-color: transparent #424653 transparent #1b1e25;
						
					}
					>.switch-info{
						font-size: 0.875rem;
						float: left;
						margin-top: 3px;
					}
					>.el-switch {
						margin-top: -6px;
					}
					>.user{
						margin-top: -27px;
						margin-left: 40px;
						font-size: 14px;
						width: 5.3125rem;
					}
					>.d-li-icon:hover{
						color: #0080ff;
					}
					>.dwon{
						position: relative;
						z-index: 999;
						width: auto;
						font-size: 14px;
						border-top: 2px solid #0080ff;
						margin-top: 9px;
						margin-left: 40px;
						background-color: #2c333f!important;
						pointer-events: all;
						>.d-li{
							padding:0.3125rem;
							>div{
								float: left;
								padding-top: 2px;
								padding-right: 0.3125rem;
							}
						}
						>.d-li:hover{
							background: #303845;
						}
					}
				}
			}
			>el-breadcrumb {
				font-size: 1.25rem;
				
				>el-dropdown{
					background: green;
				}
			}
			
			.el-breadcrumb__separator {
			    margin: 0 9px;
			    font-weight: 700;
			    color:orangered;
			}
			
		}
	}
	
</style>